<template>
    <div class="box_state" v-if="over">
      <div class="text">{{text_p(winner)}}{{winner?'胜！':''}}</div>
      <div class="btn" @click="reStart">再来一局</div>
      <div class="btn" @click="emit('back',0)">返回</div>
    </div>
    <div class="main">
      <div class="btn_over" @click="winner=(nowCamp==1?2:1);over=true">投降</div>
      <div class="tip_camp">当前行动方：{{text_p(nowCamp)}}</div>
      <canvas id="chess" width="450" height="450" @click="clickDrop"></canvas>
    </div>
  </template>
  <script setup>
  import { onMounted, ref } from 'vue';
  import chObj from "@/assets/chessUI";
  const emit = defineEmits(['back']);
  
  const nowCamp = ref(1);//当前行动方1黑2白
  const over = ref(false);
  const winner = ref(1);//胜者

  const text_p = (p) => {
    if (p == 1) {
        return `黑方`;
    } else if (p == 2) {
        return `白方`;
    }
    return '平局！';
}
  
  const reStart=()=>{
    chObj.resetChess();
    nowCamp.value = chObj.nowCamp;
    over.value = false;
  }
  
  //点击落子
  const clickDrop = (e) => {
    var x = e.offsetX / e.target.clientWidth * 450;
    var y = e.offsetY / e.target.clientHeight * 450;
    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    chObj.dropStep(i,j);
    if(chObj.over){
      winner.value = chObj.winner;
      over.value = true;
    }else{
      nowCamp.value = chObj.nowCamp;
    }
  }
  onMounted(() => {
    chObj.init(document.getElementById("chess"));
  })
  </script>
  
  <style lang="less" scoped>
  .box_state{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    .text{
      padding-left: 50px;
      padding-bottom: 80px;
      letter-spacing: 10px;
      font-weight: bold;
      font-size: 30px;
    }
    .btn{
      width: 140px;
      text-align: center;
      letter-spacing: 6px;
      font-weight: bold;
      font-size: 20px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 8px 14px 8px 20px;
      cursor: pointer;
      margin: 10px 0;
      box-shadow: 5px 5px 5px #999;
      background: #fff;
      &:hover{
        opacity: 0.7;
      }
    }
  }
  .main {
    height: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .btn_over{
      padding: 4px 14px;
      font-size: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      position: absolute;
      top: -40px;
      right: 0;
      &:hover{
        opacity: 0.7;
      }
    }
    .tip_camp {
      font-weight: bold;
      line-height: 40px;
      font-size: 18px;
      position: absolute;
      top: -40px;
    }
  
    #chess {
      height: 100%;
      box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
      background: url('../assets/bg.png');
    }
  }
  </style>
  